<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<!DOCTYPE html>
<html>
<head>
	<script src="../static/lib/ztree/jquery-1.4.4.min.js"></script>
	<script src="../static/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
	<link 	href="../static/lib/ztree/zTreeStyle.css" type="text/css" rel="stylesheet" >
	<link  href="../static/lib/zui/css/zui.min.css" rel="stylesheet">
	<script src="../static/lib/zui/js/zui.min.js"></script>
	<script type="text/javascript">
		var menuId = "<%=request.getParameter("menuId")%>";
		var vId = "<%=request.getParameter("vId")%>";
		var hId = "<%=request.getParameter("hId")%>";
		var treeType = "<%=request.getParameter("treeType")%>";
		var multiSelect = <%=request.getParameter("multiSelect")%>;//是否多选
		var _oriNodes = ${treeJson};
	
		var setting = {
			check: {
				enable: multiSelect,
				chkStyle: "checkbox",
				chkboxType: { "Y": "", "N": "" } // 选中不包含子节点 
			},
			view: {
				addDiyDom: addDiyDom,
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pid"
				}
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick,
				onCheck: onCheck
			}
		};

		var zNodes = [];
		function addDiyDom(treeId, treeNode) {
			if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
			var aObj = $("#" + treeNode.tId);		
			var editStr ="";
			if(treeNode.lev==1){
				editStr = "<a id='diyBtn1_" +treeNode.id+ "'  onclick='parent.toUpdateCzlly(\"" +treeNode.id+ "\")'><font color='blue'>修改</font></a>" +
					"<a href='#'id='diyBtn2_" +treeNode.id+ "'  onclick='parent.deleteCzlly(\"" +treeNode.id+ "\")'><font color='blue'>删除</font></a>"+
					"<a href='#'id='diyBtn3_" +treeNode.id+ "'  onclick='parent.toAddCzllz(\"" +treeNode.id+ "\")'><font color='blue'>新增组</font></a>";		
			}
			if(treeNode.lev==2){
				editStr = "<a id='diyBtn1_" +treeNode.id+ "'  onclick='parent.toUpdateCzllz(\"" +treeNode.id+ "\")'><font color='blue'>修改</font></a>" +
				"<a href='#'id='diyBtn2_" +treeNode.id+ "'  onclick='parent.deleteCzllz(\"" +treeNode.id+ "\")'><font color='blue'>删除</font></a>"+
				"<a href='#'id='diyBtn3_" +treeNode.id+ "'  onclick='parent.toAddCzllzcy(\"" +treeNode.id+ "\")'><font color='blue'>新增成员</font></a>";		
			}
			if(treeNode.lev==3){
				editStr = "<a id='diyBtn1_" +treeNode.id+ "'  onclick='parent.toUpdateCzllzcy(\"" +treeNode.id+ "\")'><font color='blue'>修改</font></a>" +
				"<a href='#'id='diyBtn2_" +treeNode.id+ "'  onclick='parent.deleteCzllzcy(\"" +treeNode.id+ "\")'><font color='blue'>删除</font></a>";	
			}
			var str=aObj.html();
			aObj.html(str+editStr);
		}
		function beforeClick(treeId, treeNode) {
			//var check = (treeNode && !treeNode.isParent);
			//if (!check) alert("只能选择根节点...");
			//return check;
			return true;
		}
		
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");

			if(multiSelect) {
				zTree.checkNode(treeNode);
				onCheck(e, treeId, treeNode)
				return;
			}
			
			var v = treeNode.id;
			var h = treeNode.name;
			//console.info(v+","+h);
			
			//调用父窗口的方法，以此传递结果
			if(parent.tree_returnValue) parent.tree_returnValue(v, h, vId, hId);
			if(parent.tree_hideMenu) parent.tree_hideMenu(menuId);//隐藏下拉框
		}
		
		function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = zTree.getCheckedNodes();
			var v = "";
			var h = "";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].id + ",";
				h += nodes[i].name + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			if (h.length > 0 ) h = h.substring(0, h.length-1);

			//调用父窗口的方法，以此传递结果
			parent.tree_returnValue(v, h, vId, hId);
		}

		$(document).ready(function(){
			showTree(_oriNodes);

			$("#btn").click(function(){
				
			});

			debounce($("#keyword"), "keydown", function(){
				var keyword = $("#keyword").val();
				if(keyword) {
					filter(keyword);
				} else {
					showTree(_oriNodes);
				}
			});
		});

		//显示树
		function showTree(zNodes) {
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			
			$("#clear").click(function(){
				if(multiSelect) {//若是多选，则去掉所有勾选
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.checkAllNodes(false);
				}
				
				parent.tree_returnValue("", "", vId, hId);//传回空值
				parent.tree_hideMenu(menuId);//隐藏下拉框
			});
		}

		//关键词过滤
		function filter(keyword) {
			var newNodes = [];
			for(var i=0; i<_oriNodes.length; i++) {
				var node = _oriNodes[i];

				try {
					var pinYin = node.pinYin;
					if(node.name.indexOf(keyword) != -1 || 
							(pinYin && pinYin.toUpperCase().indexOf(keyword.toUpperCase())!=-1)) {
						newNodes.push(node);
					}
				} catch(e) {
					//ignore
				}
			}
			showTree(newNodes);
		}

		//防抖绑定事件
		function debounce($obj, strEvent, func) {
			var timeoutId = null;
			$obj.bind(strEvent, function(){
				if(timeoutId != null) {
					window.clearTimeout(timeoutId);
				}
				timeoutId = window.setTimeout(func, 500);
			});
		}
	</script>
	<style type="text/css">
		html{height:100%;width:100%; overflow:hidden;}
		body{height:100%;width:100%; overflow:scroll; background-color: white; padding:5px;}
	</style>
</head>
<body>
	<div style="font-size: 12px; padding-left: 10px;">
		<!-- <a id="clear" href="javascript:">清空</a> -->
		&nbsp; 
		搜索：<input id="keyword"/>
	</div>
	<div id="menuContent" class="menuContent">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</body>
<script type="text/javascript">
	
</script>
</html>